<template>
	<view>
		<!-- 导航栏 -->
		<view class="viewport23">
			<view class="navibar" :style="{paddingTop : safeAreaInsets.top + 'px'}">
				<view class="titleView">
					<image class="back" src="@/static/fanhui.png" mode="aspectFit" @tap="goBack"></image>
					<view class="title">这是标题</view>
				</view>
			</view>
			<view class="" :style="{height : 60 +'px', background : '#C00000'} "></view>
		</view>
		<view class="">你好吗</view>

		<u-dropdown class="dropdown">
			<u-dropdown-item v-model="value1" title="距离" :options="options1"></u-dropdown-item>
			<u-dropdown-item v-model="value2" title="温度" :options="options2"></u-dropdown-item>
		</u-dropdown>

		<!-- 
		<view class="">下面是一个表格</view>
		<view class="tableGrid">
			<view class="gridTitleBox">
				<view class="g1"> 姓名</view>
				<view class="g1">性别</view>
				<view class="g1">家庭住址</view>
				<view class="g1">手机号</view>
				<view class="g1">备注</view>
			</view>
			<view class="grid1">
				<view class="g2">小红</view>
				<view class="g2">女</view>
				<view class="g2"> 江苏省 XX市XX街道XX社区 XX 号</view>
				<view class="g2"> 1861111111</view>
				<view class="g2"></view>
				<view class="g2">小明</view>
				<view class="g2">男</view>
				<view class="g2"> 江苏省 XX市XX街道XX社区 XX 号</view>
				<view class="g2"> 186222222</view>
				<view class="g2"> 性格开朗</view>
			</view>
		</view> -->


		<view class="grid2">
			<view class="greenHead">
				<view class="itemRedView">红色</view>
			</view>
			<view class="redHead1"> 块头2</view>
			<view class="g3"> 块头3</view>
			<view class="g3"> 块头4</view>
		</view>






	</view>
</template>

<script>
	export default {
		onLoad() {
			this.safeAreaInsets = uni.getSystemInfoSync().safeAreaInsets
		},
		data() {
			return {
				safeAreaInsets: {},
				value1: 1,
				value2: 2,
				options1: [{
						label: '默认排序',
						value: 1,
					},
					{
						label: '距离优先',
						value: 2,
					},
					{
						label: '价格优先',
						value: 3,
					}
				],
				options2: [{
						label: '去冰',
						value: 1,
					},
					{
						label: '加冰',
						value: 2,
					},
				],
			}
		},

		methods: {

			onClick() {
				console.log('按钮被点击了')
			}
		}
	}
</script>

<style scoped lang="scss">
	
	
	.redHead1 {
		background: crimson;
		grid-row: 1/2;
		grid-column: 3/ span 2;
	}
	
	.itemRedView {
		background: paleturquoise;
		width: 50px;
		height: 50px;
	}

	.tableGrid {
		background: gray;
		border: 1px solid gray;
		margin: 5px;
	}


	.gridTitleBox {
		display: grid;
		grid-template-rows: minmax(50px, auto); //  给行设高: 最小行高为 50px, 最大不限
		grid-template-columns: 50px repeat(3, 1fr) 50px; //   给列设宽
		border-bottom: 1px solid gray;
		grid-gap: 1px;
	}

	.grid1 {

		display: grid;
		grid-template-rows: minmax(50px, auto); //  给行设高: 最小行高为 50px, 最大不限
		grid-template-columns: 50px repeat(3, 1fr) 50px; //   给列设宽
		grid-gap: 1px;
	}

	.g2 {
		background: pink;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 26rpx;
		color: #333;
	}

	.g1 {
		background: paleturquoise;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		color: #000;
	}

	.grid2 {
		margin-top: 50px;
		display: grid;
		grid-template-rows: repeat(10,  minmax(100px, auto)); //  给行设高: 最小行高为 50px, 最大不限
		grid-template-columns: repeat(4, 1fr); //   给列设宽
		grid-gap: 5px;

	}

	.g3 {
		background: pink;
	}

	.greenHead {
		background: seagreen;
		display: flex;
		justify-content: center;
		align-items: center;
		grid-row: 1 /span 2;
		grid-column: 1 /span 2;
	}






	.item1 {
		background: orange;
		// justify-self: center;
		// align-self: center;

	}

	.item2 {
		background: paleturquoise;
	}

	// .item1,.item2 {
	//    grid-row-start:  1;
	//    grid-column-end: span 2;
	// }
	// .item1 { grid-column-start: 1; z-index: 3; }
	// .item2 { grid-column-start: 1; z-index: 2; }





	.dropdown {
		background: paleturquoise;
		width: 200rpx;

	}

	// 改变文字和箭头的左右布局
	.dropdown /deep/ .u-flex {
		display: flex;
	}

	// 改变箭头的布局
	.dropdown /deep/ .u-dropdown__content {
		width: 100vw;
		left: -10px;

		// display: none;
	}

	// 可修修改菜单 ItemCell 的行高
	.dropdown /deep/ .u-cell {
		line-height: 20px;
	}


	.redbox {
		// display: block;
		display: inline;
		height: 100rpx;
		width: 500rpx;
	}

	.bluebox {
		// display: block;
		// display: inline;
	}


	.buttonView {
		display: block;
		background: dodgerblue;

	}







	.navibar {
		background: url('@/static/bgimg.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		padding: 20rpx 20rpx;

		position: fixed;
		left: 0;
		right: 0;
		z-index: 100;
	}

	.titleView {
		color: #fff;
		display: flex;
		align-items: center;
		position: relative;
		height: 44px;
		/* background: orange; */
	}

	.back {
		width: 50rpx;
		height: 50rpx;
		padding-right: 80rpx;
		position: absolute;
		left: 10rpx;
	}

	.title {
		width: 100%;
		text-align: center;
		font-size: 34rpx;
	}
</style>